<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="" name="description" />
    <meta content="webthemez" name="author" />
    <title>Bootstrap Admin Theme</title>
    <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />

    <link href="../assets/css/select2.min.css" rel="stylesheet" >
    <link href="../assets/css/checkbox3.min.css" rel="stylesheet" >
    <!-- Custom Styles-->
    <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/img.css">
</head>
<body>


<!--/. NAV TOP  -->

<div id="page-wrapper" >
    <br /><br /><br />
   <div style="margin-left:-3%;">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group" style="margin-left: 3%;">
                <label for="exampleInputName2">选择接收人角色:</label>
                <select class="selectbox" id="roleId">
                <option value="">请选择</option>
	                <c:forEach items="${roleNameList }" var="role">
	                	<option value="${role.roleId}">${role.roleName }</option>
	                </c:forEach>
	        </select>
            </div>
           <div class="form-group" style="margin-left: 1%;">
                <label for="exampleInputName2">选择接收人:</label>
                <select class="selectbox" id="userId">
	                <option value="AK">请选择</option>
	                <!-- <option value="HI">Hawaii</option>
	                <option value="IL">Illinois</option>
	                <option value="IA">Iowa</option>
	                <option value="KS">Kansas</option>
	                <option value="KY">Kentucky</option> -->
	        </select>
            </div>
       
        </form>
    </div>
    </div>

    <div class="header">
        <h1 class="page-header" style="text-align: center">
            公务交通 <small>（员工个人）</small>
        </h1>

    </div>


    <!-- <div id="page-inner"> -->
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">基本信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Basic Table
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table">
<c:forEach items="${listdetails }" var="basic">
                                            <tr>
                                                <td style="text-align: right;">
                                                    报账人：
                                                </td>
                                                <td>
                                                    ${basic.userName }
                                                </td>

                                                <td style="text-align: right;">
                                                    报账单位名称：
                                                </td>
                                                <td>
                                                    ${basic.departmentName }
                                                </td>
                                                <td style="text-align: right;">报账人电话：</td>
                                                <td>
                                                    ${basic.phone }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    预算指标：
                                                </td>
                                                <td>
                                                    ${basic.budgetIndicator }
                                                </td>

                                                <td style="text-align: right;">
                                                    报账时间：
                                                </td>
                                                <td>
                                                    ${basic.reimbursementTime }
                                                </td>
                                                <td style="text-align: right;">费用发生日：</td>
                                                <td>
                                                    ${basic.invoiceTime }
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    报账单号：
                                                </td>
                                                <td id="reimbursementId">${basic.reimbursementId }</td>

                                                <td style="text-align: right;">
                                                    公司代码：
                                                </td>
                                                <td>
                                                    ${basic.companyid }
                                                </td>
                                                <td style="text-align: right;">发票类型：</td>
                                                <td>
                                                   	${basic.invoiceTypeName }
                                                </td>
                                            </tr>
                                            <tr >
                                                <td style="text-align: right;">
                                                    附单据张数：
                                                </td>
                                                <td>
                                                   ${basic.reimbursementNumber }
                                                </td>
                                                <td style="text-align: right;">
                                                    是否员工代垫：
                                                </td>
                                                <td>
                                                    ${basic.isSingle }
                                                </td>
                                                 <td style="text-align: right;">
                                                    是否个人专项：
                                                </td>
                                                <td >
                                                   ${basic.isAdvance }&nbsp;&nbsp;<a href="../persondata/personalSpecial.html" target="center">个人专项额度查询</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    报账说明：
                                                </td>
                                                <td colspan="5">
                                                   	${basic.reimbursementExplain }
                                                </td>
                                            </tr>
                                            </c:forEach>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">明细信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Kitchen Sink
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>补单理由</th>
                                                <th>详细说明</th>
                                                <th>补单张数</th>
                                                <th>补单发起时间</th>
												<th>补单金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <c:forEach items="${singleSupplement }" var="singleSupplement">
	                                            <tr>
	                                                <td style="text-align: center">
	                                                   	${singleSupplement.supplementReason }
	                                                </td>
	                                                <td style="text-align: center">
	                                                  	${singleSupplement.invoiceIdExplain }
	                                                </td>
	                                                <td style="text-align: center">
	                                                   ${singleSupplement.invoiceNumber }
	                                                </td>
	                                                <td style="text-align: center">
	                                                   ${singleSupplement.supplementTime }
	                                                </td>
													<td style="text-align: center">
	                                                   ${singleSupplement.reimbursementMoney }
	                                                </td>
	                                            </tr>
											</c:forEach>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <!--选项卡-->
                            <div class="panel panel-default">
                                
                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li class=""><a href="#home" data-toggle="tab" aria-expanded="false">内部人信息</a>
                                        </li>
                                        <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">报账单影像</a>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="home">


                                            <!--表格-->
                                            <div class="panel panel-default">
                                                <!--   <div class="panel-heading">
                                                       Bordered Table
                                                   </div>-->

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive table-bordered">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>收款人</th>
                                                                <th>所属部门</th>
                                                                <th>员工编号</th>
                                                                <th>收款类型</th>
                                                                <th>公司名称</th>
                                                                <th>开户行</th>
                                                                <th>银行账号</th>
                                                             
                                                                <th>金额</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <c:forEach items="${listOtherInformation }" var="otherInformation">
	                                                           <tr>
	                                                                <td>1</td>
	                                                                <td>
	                                                                   ${otherInformation.userName }
	
	                                                                </td>
	
	                                                                <td>
	                                                                   ${otherInformation.departmentName }
	
	                                                                </td>
	                                                                <td>
	                                                                    ${otherInformation.userId }
	
	                                                                </td>
	                                                                <td>
	                                                                   ${otherInformation.receivablesType }
	
	                                                                </td>
	                                                                <td>
	                                                                  ${otherInformation.companyName }
	
	                                                                </td>
	                                                                <td>
	                                                                   ${otherInformation.bankName }
	
	                                                                </td>
	                                                                <td>
	                                                                   ${otherInformation.bankNumber }
	
	                                                                </td>
	                                                               
	                                                                <td>
	                                                                  ${otherInformation.reimbursementMoney }
	
	                                                                </td>
	
	                                                            </tr>
                                                           	</c:forEach>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                                作者：1049794100@qq.com
                                                时间：2018-01-04
                                                描述：表格
                                            -->
                                        </div>
                                        <div class="tab-pane fade active in" id="profile">
                                	<div></div>
                                	&nbsp;&nbsp;
                                	<div style="margin-left: 1%;">
                                		<c:forEach  items="${imageList }" var="image">
                                            <img alt="" src="${image.enclosureUrl }">
                                            </c:forEach>
                                               <!--  <button type="button" class="btn btn-success btn-circle"><i class="fa fa-link"></i>
                                                </button> -->
                                	</div>
                                </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

<div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">申请评论</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                             <div class="panel panel-default">
                                <br class="panel-body">
                                <div class="panel-body">
                					<div class="sub-title">审批意见</div>
									<div>
									<br>
									 <textarea class="form-control" rows="3" id="approvalOpinion"></textarea>
									</div>
		           				</div>
		           				<div style="margin-left:1%">
									 <a href="#" class="btn btn-primary" onclick="workAgree()">同意</a>
									 <a href="#" class="btn btn-danger" style="margin-left:1%" onclick="workRejec()" >驳回</a>
									 <a href="#" class="btn btn-warning" style="margin-left:1%" onclick="workDisagree()" >不同意</a>
								</div>
								<br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<script src="../assets/js/select2.full.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".selectbox").select2();
    });
	</script>

<!-- 这里需要点击角色名称 获取到当前角色id  然后通过ajax去后台找当前角色的用户 -->
	<script type="text/javascript">
	layui.use('layer', function(){
	    var layer = layui.layer;
	});
		$("#roleId").on("change",function(){
			var roleId = this.value;//当前的角色id
			console.log(roleId);
			console.log("11111");
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/travelApplication/listUserNameAll.do",
				dataType:"json",
				data:{"roleId":roleId},
				success:function(data){
					console.log("成功了");
					if(data == null || data == ""){
						console.log("没数据");
						$("#userId").children().remove();
					}else {
						var str = "";
						$("#userId").children().remove();
						$.each(data,function(key,val){
							str += '<option value='+ val.userId +'>'+val.userName+'</option>';
							console.log(key);
							console.log("-----");
							console.log(val);
						});
						$("#userId").append(str);
					}
				},
				error:function(data){
					console.log(data);
				}
			});
		});
		
		function workAgree(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待阅" ;//工作状态名称
			var userId =parseInt($('#userId option:selected').val()) ;//用户id
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="未同意" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已阅" ;//需要修改的审批状态  */
			var approvalStateNameUpdate ="同意";//需要修改的审批状态
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				"userId":userId,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate,
				"approvalStateNameUpdate":approvalStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalAgreeAndReading.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		});
			
			
			
		}
		
		function workDisagree(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待阅" ;//工作状态名称
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="未同意" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已阅" ;//需要修改的审批状态  */
			
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalDisAgreeAndReading.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		});						
		}
		function workReject(){
			var reimbursementId = $("#reimbursementId").text();//报销id
			var workStateName ="待办" ;//工作状态名称
			//var userId =parseInt($('#userId option:selected').val()) ;//用户id
			var approvalOpinion =$("#approvalOpinion").val();//审批意见
			var approvalStateName ="驳回" ;//审批的状态（查找的条件）
			var workStateNameUpdate ="已办" ;//需要修改的审批状态  */
			console.log(reimbursementId);
			console.log(workStateName);
			var ApprovalJson = {
				"reimbursementId":reimbursementId,
				"workStateName":workStateName,
				//"userId":userId,
				"approvalOpinion":approvalOpinion,
				"approvalStateName":approvalStateName,
				"workStateNameUpdate":workStateNameUpdate
			}
			$.ajax({
				url:"../approval/approvalDisAgreeAndBackLog.do",
				type:"POST",
				contentType:'application/json;charset=UTF-8',//关键是要加上这行
		        //traditional:true,//这使json格式的字符不会被转码
		        dataType:"json",
		        async:true,
		        data:JSON.stringify(ApprovalJson),//把json对象转为字符串传递给后台
				success:function(data){
					layer.msg("数据已提交!!!");
					layer.close(layer.index);
		            window.parent.location.reload();
				},
				error:function(data){
					layer.msg("数据错误，请重新输入！");
					
				},
		   });						
		}
	</script>
<!-- Custom Js -->
<script src="../assets/js/custom-scripts.js"></script>



</body>
</html>
